<!-- BaseMessage.vue -->
<script setup lang="ts">
import { computed } from 'vue'
import { NAvatar } from 'naive-ui'

const props = withDefaults(defineProps<{
  avatarSrc: string // 头像图片
  nickname: string // 昵称
  avatarColor: string // 头像颜色
  bgColor: string // 背景颜色
  placement: 'left' | 'right' // 位置
  showActions: boolean // 是否显示操作按钮
}>(), {
  showActions: true
})

const flexDirection = computed(() =>
  props.placement === 'right' ? 'flex-row-reverse' : 'flex-row'
)

const textAlignment = computed(() => (props.placement === 'right' ? 'text-right' : 'text-left'))

const actionsClass = computed(() => {
  return {
    'flex justify-between items-center':true,
    'opacity-0 transition-opacity duration-200 group-hover:opacity-100':props.showActions
  }}
)
</script>

<template>
  <div :class="['text-sm text-gray-500 mb-1', textAlignment , placement === 'right' ? 'mr-2' : 'ml-2']">
    {{ nickname }}
  </div>
  <div :class="['flex', flexDirection]">
    <NAvatar :src="avatarSrc" :style="{ backgroundColor: avatarColor }"  />
    <div
      :class="['ml-2 mr-2  group flex flex-col']"
      style="min-width: 300px; min-height: 60px; max-width: 70%"
    >
      <div
        class="text text-gray-800 p-3 rounded-lg break-words whitespace-pre-wrap"
        :style="{ backgroundColor: bgColor }"
      >
        <slot name="content"></slot>
      </div>
      <div :class="actionsClass">
        <div class="message-actions-left">
          <slot name="message-actions-left"></slot>
        </div>
        <div class="message-actions-right">
          <slot name="message-actions-right"></slot>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.loader {
  width: 5px;
  aspect-ratio: 1;
  border-radius: 50%;
  animation: l5 1s infinite linear alternate;
}
@keyframes l5 {
  0% {
    box-shadow:
      15px 0 #000,
      -15px 0 #0002;
    background: #000;
  }
  33% {
    box-shadow:
      15px 0 #000,
      -15px 0 #0002;
    background: #0002;
  }
  66% {
    box-shadow:
      15px 0 #0002,
      -15px 0 #000;
    background: #0002;
  }
  100% {
    box-shadow:
      15px 0 #0002,
      -15px 0 #000;
    background: #000;
  }
}
</style>
